<template>
	<div>
		<div>
			<van-nav-bar title="首页" />
		</div>
		<div id="carMsg">
			<div class="classTitle">车辆信息</div>
			<div style="display: flex; font-size: 16px;padding: 10px;" id="carMsg">
				<div style="flex: 1;">剩余电量：{{carMsg.remainingPower}}%</div>
				<div style="flex: 1;">剩余续航：{{carMsg.enduranceMileage}}km</div>
			</div>
			<div>
				<img src="@/assets/service/hisBanner.png" height="" width="400">
			</div>
		</div>
		<div id="carControl﻿">
			<div class="classTitle">车辆控制</div>
			<div style="display: flex; flex-wrap: nowrap;">
				<van-button slot="icon" plain hairline round type="info" class="buttonItem" @click="chageWindowState">
					<img :src="`${windowState === 0 ? openWindow : closeWindow}`" width="30" style="vertical-align: middle;">
					<span style="vertical-align: middle;">{{windowState === 0 ? '打开车窗' : '关闭车窗'}}</span>
				</van-button>
				<van-button slot="icon" plain hairline round type="info" class="buttonItem" @click="chageDoorState">
					<img :src="`${doorState === 0 ? openDoor : closeDoor}`" width="30" style="vertical-align: middle;">
					<span style="vertical-align: middle;">{{doorState === 0 ? '解锁车辆' : '锁定车辆'}}</span>
				</van-button>
			</div>
		</div>
		<div>
			<van-tabbar v-model="active" route>
				<van-tabbar-item to='/community'>
					<span>社区</span>
					<template slot="icon">
						<img src="@/assets/tabbar/community.png">
					</template>
				</van-tabbar-item>
				<van-tabbar-item to='/analysis'>
					<span>数据分析</span>
					<template slot="icon">
						<img src="@/assets/tabbar/analysis.png">
					</template>
				</van-tabbar-item>
				<van-tabbar-item to='/home'>
					<template slot="icon">
						<img src="@/assets/tabbar/home.png">
					</template>
				</van-tabbar-item>
				<van-tabbar-item to='/service'>
					<span>服务</span>
					<template slot="icon">
						<img src="@/assets/tabbar/service.png">
					</template>
				</van-tabbar-item>
				<van-tabbar-item to='/mine'>
					<span>我的</span>
					<template slot="icon">
						<img src="@/assets/tabbar/mine.png">
					</template>
				</van-tabbar-item>
			</van-tabbar>
		</div>
	</div>
</template>

<script>
	import request from '@/util/request'
	export default {
		name: 'home',
		data() {
			return {
				active: '/home',
				carMsg: [],
				carState: '',
				windowState:0,
				doorState:0,
				openWindow:require("@/assets/closeWindow_act.png"),
				closeWindow:require("@/assets/closeWindow.png"),
				openDoor:require("@/assets/locked_act.png"),
				closeDoor:require("@/assets/unlock_act.png")
			}
		},
		mounted() {
			this.getUserInfo()
			this.getCarMsg()
			this.getCarState()
		},
		methods: {
			getUserInfo() {
				console.log(window.localStorage.getItem("token"))
			},
			// 获取信息
			getCarMsg() {
				request({
					url: '/dev-api/bs-vehicle-owner/carInfo/getByCarId/' + JSON.parse(window.localStorage.getItem(
						"carInfo")).carId,
					method: 'get',
				}).then(res => {
					this.carMsg = res.data
					console.log(this.carMsg)
				})
			},
			// 获取状态
			getCarState() {
				request({
					url: '/dev-api/bs-smart-charger-biz/CarState/' + JSON.parse(window.localStorage.getItem(
							"carInfo"))
						.carId,
					method: 'get',
				}).then(res => {
					this.carState = res.data.carState

				})
			},
			chageWindowState(){
				// console.log("当前"+this.windowState)
				if(this.windowState == 1){
					this.windowState = 0
					this.$toast.success('车窗已关闭')
				}else{
					this.windowState = 1
					this.$toast.success('车窗已打开')
				}
				// console.log("修改后"+this.windowState)
			},
			chageDoorState(){
				// console.log("当前"+this.windowState)
				if(this.doorState == 1){
					this.doorState = 0
					this.$toast.success('汽车已锁定')
				}else{
					this.doorState = 1
					this.$toast.success('汽车已解锁')
				}
				// console.log("修改后"+this.windowState)
			}
		}
	}
</script>

<style>
	.classTitle {
		text-align: left;
		font-size: 21px;
		padding: 10px;
		margin: 10px 0px;
	}

	#carControl {
		padding: 5px;
	}

	.buttonItem {
		flex: 1;
		margin: 5px;
	}
</style>
